<template>
  <!--
    ________      ___           ________      ________      ___  ____
    |\   __  \    |\  \         |\   __  \    |\   ____\    |\  \|\  \
    \ \  \|\ /_   \ \  \        \ \  \|\  \   \ \  \___|    \ \  \/  /|_
     \ \   __  \   \ \  \        \ \   __  \   \ \  \        \ \   ___  \
      \ \  \|\  \   \ \  \____    \ \  \ \  \   \ \  \____    \ \  \\ \  \
       \ \_______\   \ \_______\   \ \__\ \__\   \ \_______\   \ \__\\ \__\
        \|_______|    \|_______|    \|__|\|__|    \|_______|    \|__| \|__|
    1. 一些公用的css样式表最好不要写在<el-标签>里，建议写在<style>里，不然后期维护会很麻烦
       那些只有特定标签独有的css写在<el-标签里>
        （tips1: 在style中定义标签的方法———— .class名  #id名）
    2. element是支持自定义组件的颜色、大小之类的标签值的，只需要打开F12开发者工具，找到el标签对应的class就行
        （tips: element中组建的class名和标签名一般是一样的，但一些特殊的会在标签名后面加一个 --）
        （tips：element中组件的基础颜色、大小往往是预设的，这时要在自定义style值后面加一个 !important 表示强制使用自定义，不然默认修改不生效）
    3. 一个用style的小技巧：style是支持class名嵌套调试的比如：
        html:
         <div class="father">
           <div class="son">
          </div>
         </div>

        css:
         <style>
           .father {
              这里写父标签的style
              .son {
                  这里写子组件的style
              }
           }
         </style>
        在实际开发中程序员也喜欢用这种方式调样式表，因为这样能保证样式表的结构和标签的结构是一样的，结构比较规矩、便于理解，建议看一下我调样式表的方式
        （tips: 其实element框架只是便于快速成型网页的，实际上公司面向的甲方除非是啥也不懂，不然都会对页面的样式做出要求，就比如航天二院的项目，
                对于这种情况不如老老实实用div布局页面盒子，一点一点搭）
  -->
  <div class="main">
    <!--  卡片视图区  -->
    <el-card shadow="hover" style="flex: 1; margin-right: 10px; border: 1px solid rgba(120, 120, 120, 0.9); background-color: rgba(255, 255, 255, 0.15);">
      <!--新建按钮-->
      <el-button
          type="success" plain
          @click="dialogFormVisible = true"
          style="display: flex"
      >新建
      </el-button>
      <!--新建表单-->
      <el-dialog title="新建信息" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单权限" :label-width="formLabelWidth">
            <el-select v-model="form.auth" placeholder="请选择菜单权限" style="display: flex ;margin-left: 5px; width: 150px">
              <el-option label="综合管理" value="综合管理"></el-option>
              <el-option label="鸟情光电监测预警" value="鸟情光电监测预警"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRow(); dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!--表格复合体-->
      <el-row>
        <!--表格部分-->
        <el-table :data = "tableData" border :header-cell-style="{background:'#09293e',fontSize:'20px',color:'#fff'}">
          <el-table-column label = "用户名" prop = "name">
            <template  v-slot ="scope">
              <div v-if="!isEditing(scope.$index)">{{ scope.row.name }}</div>
              <el-input v-else v-model="editingRow.name"></el-input>
            </template></el-table-column>
          <el-table-column label = "邮箱" prop = "email">
            <template  v-slot ="scope">
              <div v-if="!isEditing(scope.$index)">{{ scope.row.email }}</div>
              <el-input v-else v-model="editingRow.email"></el-input>
            </template></el-table-column>
          <el-table-column label = "菜单权限" prop = "auth">
            <template  v-slot ="scope">
              <div v-if="!isEditing(scope.$index)">{{ scope.row.auth }}</div>
              <el-input v-else v-model="editingRow.auth"></el-input>
            </template></el-table-column>
          <el-table-column label = "操作">
            <template v-slot = "scope">
              <el-button type = "primary" @click="dialogTableVisible = true">查看</el-button>
              <el-dialog title="查看信息" :visible.sync="dialogTableVisible"  :modal-append-to-body="false">
                <el-table border :data="tableData">
                  <el-table-column label = "用户名" prop = "name"></el-table-column>
                  <el-table-column label = "邮箱" prop = "email"></el-table-column>
                  <el-table-column label = "菜单权限" prop = "auth"></el-table-column>
                </el-table>
              </el-dialog>
              <el-button type = "primary" @click="editItem(scope.$index)" v-if="!isEditing(scope.$index)">编辑</el-button>
              <el-button type="success" @click="saveRow(scope.$index)" v-if="isEditing(scope.$index)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页部分-->
        <div class="elPaginations">
          <el-pagination
              style="color: #757575"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              :current-page="Pages.pageIndex"
              :page-size="Pages.pageSize"
              layout="prev, pager, next, jumper"
              :total="Pages.total">
          </el-pagination>
          <el-pagination layout="slot" :total="Pages.total" >
            <span class="leftPagination" style = "color:white">共{{ Pages.total }}条</span>
          </el-pagination>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default{
  name:'UpLoad',
  data(){
    return{
      tableData:[
        {name:'A',email:'A@admin.com',auth:'综合管理'},
        {name:'B',email:'B@admin.com',auth:'鸟情光电监测预警'},
        {name:'C',email:'C@admin.com',auth:'综合管理，鸟情光电监测预警'},
        {name:'D',email:'D@admin.com',auth:'综合管理'}
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        email: '',
        auth:'',
      },
      formLabelWidth: '120px',
      Pages: {
        pageIndex: 1,
        pageSize: 6, // 默认每页6条
        total: 4,
        sortWord: "id", // 默认 id降序
        sortOrder: "DESC", // "ASC"
        searchWord: "",
      },
      editingIndex: -1,
      editingRow: null
    }
  },
  methods:{
    // 新建一条数据
    addRow () {
      const name = this.form.name
      console.log(name)
      const email = this.form.email
      console.log(email)
      const auth = this.form.auth
      console.log(auth)
      this.tableData.push({name,email,auth})
      alert("添加成功")
    },
    //编辑
    editItem(index) {
      console.log(index);
      this.editingIndex = index // 记录当前正在编辑的行索引
      this.editingRow = Object.assign({}, this.tableData[index]) // 复制一份要编辑的行数据
      this.$set(this.tableData, index, this.editingRow) // 将要编辑的行数据替换为输入框
    },
    saveRow(index) {
      // TODO: 保存编辑后的行数据到接口
      console.log('保存编辑后的行数据：', this.editingRow)
      this.editingIndex = -1 // 清除当前正在编辑的行索引
    },
    isEditing(index) {
      return index === this.editingIndex
    }
  }
}
</script>
<style lang="less" scoped>
// 最外层是一个main
.main {
  display: flex;
  flex-direction: row-reverse;
  // 里面嵌套一个el-card
  .el-card {
    // 在里面嵌套一个el-button
    // 子按钮样式
    .el-button {
      margin-left: 10px;
      background: #54c256 !important;
      color: #ffffff !important;
      border-color: #FFFFFF !important;
    }
    // 悬浮时子按钮样式
    .el-button:hover {
      background: #3599F5 !important;
      border-color: #3599F5 !important;
      color: #FFF !important;
      opacity: 0.8;
    }
    // 选中时的子按钮样式
    .el-button:focus {
      background: #09293e !important;
      border-color: #ffffff !important;
      color: #fff !important;
    }
    // el-dialog 的样式
    // el-dialog__wrapper 是 el-dialog外边套的一层背景
    /deep/ .el-dialog__wrapper .el-dialog {
      // 这是背景颜色
      background: #09293e !important;
    }
    // el-dialog 的标题样式
    /deep/ .el-dialog__wrapper .el-dialog__title {
      // 这时字体颜色
      color: rgb(255, 255, 255)  ;
      // 这是字体粗细
      font-weight: 900;
    }
    // el-dialog 的主体样式(el-form-item__label嵌套的相当深,所以就得找的费劲一点)
    /deep/ .el-dialog__wrapper .el-dialog__body .el-form .el-form-item .el-form-item__label {
      color: rgb(255, 255, 255) ;
      font-weight: 500;
    }
    // el-row

    .elPaginations {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
    }
  }

}

</style>